<template>
  <div>
    <div class="dialog-top flex-row">
      <div class="common-color-3 fz-18 left-title">{{ bookApplyInfo.user_name || '-' }}发起的《{{ bookApplyInfo.book_name ||
        '-' }}》选用申请
      </div>
      <div class="status-btn margin-left-20" :style="getStyle()">{{ getStatus() || '-' }}</div>
    </div>
    <div class="flex-row margin-top-20">
      <div><span class="common-color-9">申请编号：</span><span class="common-color-3">{{ bookApplyInfo.apply_code || '-' }}</span>
      </div>
      <div style="margin-left:285px"><span class="common-color-9">发起时间：</span> <span class="common-color-3">{{
        parseTime(bookApplyInfo.create_time) || '-' }}</span></div>
    </div>
    <el-divider></el-divider>
    <div class="flex-row">
      <div class="flex-column">
        <div class="common-color-9">审批进度</div>
        <div class="mt20" style="width: 200px;">
          <el-timeline :reverse="false">
            <el-timeline-item v-for="(activity, index) in activities" :key="index" :color="activity.color">
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <!-- <div style="height: 300px"><el-divider direction="vertical" style="height: 100% !important;"></el-divider></div> -->

      <div style="height: 300px; margin-left: 100px">
        <div>
          <div class="common-color-9">申请详情</div>
          <div class="mt20" style="line-height: 38px">
            <!-- <div class="common-color-3">这是老师填的申请信息</div> -->
            <el-descriptions :column="2">
              <el-descriptions-item>
                <template slot="label">
                  <span class="escriptions-label">教材名称</span>

                </template>
                <span class="escriptions-content">{{ bookApplyInfo.book_name || '-' }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <span class="descriptions-label">开课学期</span>
                </template>
                <span class="descriptions-content">{{ bookApplyInfo.semester || '-' }}</span>
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <span class="descriptions-label">课程编号</span>
                </template>
                <span class="descriptions-content">{{ bookApplyInfo.course_code || '-' }}</span>
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <span class="descriptions-label">课程名称</span>
                </template>
                <span class="descriptions-content">{{ bookApplyInfo.course_name || '-' }}</span>
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <span class="descriptions-label">ISBN编号</span>
                </template>
                <span class="descriptions-content">{{ bookApplyInfo.isbn_code || '-' }}</span>
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <span class="descriptions-label">开课学院</span>
                </template>
                <span class="descriptions-content">{{ bookApplyInfo.academyUsedName || '-' }}</span>
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <span class="descriptions-label">专业代码</span>
                </template>
                <span class="descriptions-content">{{ bookApplyInfo.specialityCode || '-' }}</span>
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <span class="descriptions-label">专业名称</span>
                </template>
                <span class="descriptions-content">{{ bookApplyInfo.specialityName || '-' }}</span>
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <span class="descriptions-label">教材类别</span>
                </template>
                <span class="descriptions-content">{{ bookApplyInfo.book_tpye || '-' }}</span>
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <span class="descriptions-label">教材性质</span>
                </template>
                <span class="descriptions-content">{{ bookApplyInfo.book_property || '-' }}</span>
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <span class="descriptions-label">教材选用依据</span>
                </template>
                <span class="descriptions-content">{{ bookApplyInfo.applyReason || '-' }}</span>
              </el-descriptions-item>

            </el-descriptions>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBookApplyStatus, getBookApplyInfo } from "@/api/bkmanage/application";
import { handleStyle, deepClone } from "../common/index";
export default {
  name: "Approve",
  props: {
    applyId: {
      type: Number,
      default: ''
    }
  },
  data() {
    return {
      activities: [
        {
          content: '提交',
          result: '已提交',
          color: '#5178C6',
          audit_status: 1,
        },
        {
          content: '初审',
          result: '未审核',
        },
        {
          content: '复审',
          result: '未审核'
        },
        {
          content: '终审',
          result: '未审核'
        },
        {
          content: '公示',
          result: '未公示'
        },
        {
          content: '完成',
          result: '未完成'
        }],

      bookApplyInfo: {}
    }
  },
  created() {
    if (this.applyId) {
      this.getBookInfo()
    }

  },
  methods: {
    // 申请状态 和 申请信息
    getBookInfo() {
      getBookApplyStatus({ applyId: this.applyId }).then(async res => {
        const act = deepClone(this.activities)
        await this.mergeActivities(act, res.rows)
      })
      getBookApplyInfo(this.applyId).then(res => {
        const {
          speciality_code: specialityCode,
          speciality_name: specialityName,
          apply_reason: applyReason,
          academy_used_name: academyUsedName,
          ...rest
        } = res.data;
        this.bookApplyInfo = {
          specialityCode,
          specialityName,
          applyReason,
          academyUsedName,
          ...rest
        };
      })

    },
    mergeActivities(activities, rows) {
      
      rows.forEach((item, index) => {
        item.color = '#5178C6'
        activities[index] = { ...activities[index], ...item, };
        console.log(activities, 'activities[index]')
      });
      // audit_status	审核状态：1通过；2驳回；3撤回
      activities.forEach((item, indexA) => {
        switch (indexA) {
          case 0:
            item.result = item.apply_status === 1 ? '已提交' : '';
            break;
          case 1:
          case 2:
          case 3:
            if (item.audit_status === 1) {
              item.result = '已同意';
            } else if (item.audit_status === 2) {
              item.result = '已拒绝';
            } else if (item.audit_status === 3) {
              item.result = '已撤回';
            } else {
              item.result = '未审核';
            }
            break;
          case 4:
            item.result = item.apply_status === 5 ? '已公示' : '未公示';
            break;
          case 5:
            item.result = item.apply_status === 6 ? '完成' : '未完成';
            break;
        }
      });

      this.activities = activities
    },
    // 状态处理
    getStatus() {
      // 筛选出所有含有 audit_status 属性的元素
      const filteredActivities = this.activities.filter(activity => activity.hasOwnProperty('audit_status'));

      // 获取筛选结果的最后一条数据
      const lastActivityWithAuditStatus = filteredActivities[filteredActivities.length - 1];

      if (lastActivityWithAuditStatus) return lastActivityWithAuditStatus.result
    },
    // 状态按钮样式处理
    getStyle() {
      return handleStyle(this.getStatus())
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-top {
  .left-title {
    min-height: 30px;
    line-height: 30px;
  }

  .status-btn {
    // min-width: 60px;
    height: 30px;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    text-align: center;
  }
}

.descriptions-label {
  color: #999999;
}

.descriptions-content {
  color: #333333;
}
</style>
